import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Input } from '@tarojs/components'
import './patientInformation.css'
import { AtList, AtListItem, AtInput, AtForm, AtButton, AtTextarea } from 'taro-ui'
import right from '../../img/right.png'
import app from '../../main';


export default class PatientInformation extends Component {

    config = {
        navigationBarTitleText: '患者信息'
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            health_archive_id:'',
            name:'',
            phone: '',
            profession:'',
            city:'',
            province:'',
            text:'font-size: 15px ; color:#6d6d6d; ' ,
            icon:'height:20px; width:20px; float: right; margin: 18px 5px 0 0;',
            inputMargin:'width: 95%;',
            style:'font-size: 17px ; color:#000000; margin:15px 0 0 17px;',
            selector: ['男', '女'],
            gender: '男',
            dateSel: '请选择出生日期',
            citySel:'请选择居住城市',
            marray: ['已婚', '未婚'],
            marrayChecked:'请选择婚姻状态',
            relation:['本人','家庭成员','亲戚','朋友','其它'],
            relationDel:'请选择患者关系',
            value:'',
            patant:{},
        }
    }
   
    onChange = e => {
        this.setState({
            selectorChecked: this.state.selector[e.detail.value],
        })
    }
    onChangeM = e => {
        this.setState({
            marrayChecked:this.state.marray[e.detail.value],
        })
    }
    onDateChange = e => {
        this.setState({
            dateSel: e.detail.value
        })
    }
    onCityChange = e => {
        this.setState({
            province:e.detail.value[0],
            city:e.detail.value[1],
            citySel: e.detail.value[0] +','+ e.detail.value[1]
        })
    }

    onrelationChange = e => {
        this.setState({
            relationDel:this.state.relation[e.detail.value],
        })
    }

    handleChange (event) {
        this.setState({
            value: event.target.value
        },()=>{
            console.log('1',this.state.value)
        })
    }

    changge(id,value){
        console.log(value)
        if(id == 0){
            this.setState({
                name:value
            })
        }
        if(id == 1){
            this.setState({
                phone:value
            })
        }
        if(id == 2){
            this.setState({
                profession:value
            })
        }
    }

    //点击保存跳转
    gotoQuicklyFound(){
        let arr = this.state
        if(arr.name == '' || arr.dateSel == '请选择出生日期'){
            Taro.showModal({
                title: '警告',
                content: '请先填写必填信息后再点击保存',
                showCancel:false
            })
            return;
        }
        let id = this.$router.params.id
        if(id != null && id!= undefined && id!= ''){
            let data={
                health_archive_id:id,
                name:this.state.name,
                gender:this.state.selectorChecked,
                birthday:this.state.dateSel,
                phone:this.state.phone,
                current_illness:this.state.value,
                profession: this.state.profession,
                province: this.state.province,
                city: this.state.city,
                relation: this.state.relationDel,
                marry_status: this.state.marrayChecked
            }
            app.post('web/healthArchives/updateHealthArchives', data, function(res){
                console.log('2',res)
                if(res.data.status == "200"){
                    Taro.navigateBack({delta: 1})
                }else{
                    Taro.showModal({
                        title: '提示',
                        content: '提交失败,错误参数：'+ res.data.errorMsg,
                        showCancel:false
                    })
                    return;
                }        
            }) 
        }else{
            this.setDate()
        }    
    }
    // 已有信息赋值
    assignment(){
        let me = this
        let info = me.state.patant
        let citySel = info.province+info.city
        me.setState({
            name:info.name,
            selectorChecked:info.gender,
            dateSel:info.birthday,
            relationDel:info.relation,
            phone:info.phone,
            citySel:citySel,
            province:info.province,
            city:info.city,
            marrayChecked:info.marry_status,
            profession:info.profession,
            value:info.current_illness
        },()=>{
            console.log('1',this.state.value)
        })
    }

    // 获取信息
    getDate(id){
        let me = this;
        let data = {health_archive_id:id};
        //获取患者信息
        app.post('web/healthArchives/healthArchivesDetail',data, function(res){
            console.log("拿到的患者信息",res)
            me.setState({
                patant:res.data.result
            },()=>{ 
                me.assignment()
            })
        })
    }
    
    //添加患者信息
    setDate(){
        let me = this
        let data={
            name:this.state.name,
            gender:this.state.selectorChecked,
            birthday:this.state.dateSel,
            phone:this.state.phone,
            current_illness:this.state.value,
            profession: this.state.profession,
            province: this.state.province,
            city: this.state.city,
            relation: this.state.relationDel,
            marry_status: this.state.marrayChecked
        }
        app.post('web/healthArchives/createHealthArchives', data, (res)=>{
            if(res.data.status == "200"){
                Taro.navigateBack({delta: 1})
                console.log(1)
            }else{
                Taro.showModal({
                    title: '提示',
                    content: '提交失败,错误参数：'+ res.data.errorMsg,
                    showCancel:false
                })
                console.log(3)
                return;
            }   
        })
    }

    getInfo() {
        var me = this;
        app.get('web/patient/getInfoByToken', {}, function(res) {
            me.setState({
                phone: res.data.result.phone
            })
        })
    }

    componentDidMount (){
        let id = this.$router.params.id
        console.log('id',id)
        if(id !=null && id != undefined && id !=''){
           this.getDate(id)
        }
        this.getInfo();
    }


  render () {
    return (
        <View className='index'>
            <AtForm className='from'>
                <AtInput
                    title='姓名(必填)'
                    type='text'
                    placeholder='请输入真实姓名'
                    value={this.state.name}
                    onChange={this.changge.bind(this,0)}
                />
            </AtForm>

            <AtList hasBorder={false}>
                <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                    <AtListItem title='性别(必填)' arrow='right' extraText={this.state.selectorChecked} hasBorder={true} value={this.state.gender}/>
                </Picker>
            </AtList>

            <AtList hasBorder={false}>
                <Picker mode='date' onChange={this.onDateChange}>
                    <AtListItem title='出生日期(必填)' arrow='right' extraText={this.state.dateSel} hasBorder={true} value={this.state.birthday}/>
                </Picker>
            </AtList>

            <AtList hasBorder={false}>
                <Picker mode='selector' range={this.state.relation} onChange={this.onrelationChange}>
                    <AtListItem title='患者关系' arrow='right' extraText={this.state.relationDel} hasBorder={true} value={this.state.relation}/>
                </Picker>
            </AtList>

            {/* <AtForm>
                <AtInput
                    title='手机号码'
                    type='number'
                    maxLength='11'
                    placeholder='请输入手机号'  
                    value={this.state.phone}
                    onChange={this.changge.bind(this,1)}   
                />
            </AtForm> */}

            <AtList hasBorder={false}>
                <Picker mode='region' onChange={this.onCityChange}>
                    <AtListItem title='居住城市' arrow='right' extraText={this.state.citySel} hasBorder={true} value={this.state.citySel}/>
                </Picker>
                <Picker mode='selector' range={this.state.marray} onChange={this.onChangeM}>
                    <AtListItem title='婚姻状态' arrow='right' extraText={this.state.marrayChecked} hasBorder={true} value={this.state.marry_status}/>
                </Picker>
            </AtList>

            <AtForm>
                <AtInput
                    title='职业'
                    type='text'
                    placeholder='请输入患者职业'    
                    value={this.state.profession}
                    onChange={this.changge.bind(this,2)} 
                />
            </AtForm>

            <View className='emptyBox'/>

            <View className='textBox'>
                <View className='text' style={this.state.text}>既往病史(必填)</View>
                <View className='box'>
                    <AtTextarea value={this.state.value} onChange={this.handleChange.bind(this)} placeholder='请填写既往病史'  maxlength={200}  style='background:#fff;width:100%;height:60px;' />
                </View>
            </View>

            <AtButton className='btn' onClick={this.gotoQuicklyFound.bind(this)}>保存</AtButton>
      
        </View>
    )
  }
}
